<!--
 * @Author: zjj
 * @Date: 2020-01-14 10:27:13
 * @LastEditors  : zjj
 * @LastEditTime : 2020-01-19 11:13:19
 -->
<!--  -->
<template>
  <div class="refund-detail">
    <Nav title="售后详情">
      <template v-slot:left>
        <span class="back" @click=" $router.back()"></span>
      </template>
    </Nav>
    <div class="body">
      <div class="refund-status">
        <div class="f-12 color-white">完成</div>
        <div class="bar">
          <span class="circle flex justify-center aligin-center">
            <span class="status-icon"></span>
          </span>
          <span class="circle flex justify-center aligin-center">
            <span class="status-icon"></span>
          </span>
          <span class="circle flex justify-center aligin-center">
            <span class="status-icon"></span>
          </span>
        </div>
        <div class="f-12 color-white flex justify-between">
          <span>用户发起售后申请</span>
          <span>商户售后中</span>
          <span>用户已确认</span>
        </div>
      </div>
      <div class="content">
        <div class="user-confirm">
          <div class="title f-12 flex justify-between">
            <span>用户已确认</span>
            <span class="color-gray">2020-1-14 14:30</span>
          </div>
          <div class="result f-12 color-gray">售后结果：用户已确认，售后已完成。</div>
        </div>
        <div class="reply">
          <div class="title f-12 flex aligin-center justify-between">
            <img class="icon" src="" alt="">
            <span class="name">小明</span>
            <span class="color-gray">2020-1-14 14:30</span>
          </div>
          <div class="content f-14">
            <div class="color-gray">售后说明：全部换货全部换货全部换货全部换货全部全部换货全部换货全部换货全部换货</div>
            <div class="img-list flex">
              <template v-for="(item,index) in 4">
                <img class="img" src="" alt="" :key="index">
              </template>
            </div>
          </div>
        </div>
        <div class="reply">
          <div class="title f-12 flex aligin-center justify-between">
            <img class="icon" src="" alt="">
            <span class="name">小明</span>
            <span class="color-gray">2020-1-14 14:30</span>
          </div>
          <div class="content f-14">
            <div class="color-gray">发起售后申请：全部换货</div>
            <div class="color-gray">售后说明：全部换货全部换货全部换货全部换货全部全部换货全部换货全部换货全部换货</div>
            <div class="img-list flex">
              <template v-for="(item,index) in 4">
                <img class="img" src="" alt="" :key="index">
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav"
export default {
  components: {Nav},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.refund-detail {
  height: 100%;
  .body {
    height: calc(100% - 45px);
    overflow: auto;
    .refund-status {
      padding: 24px 17px 22px 34px;
      box-sizing: border-box;
      height: 107px;
      background: rgba(234, 55, 63, 1);
      .bar {
        margin: 15px 0 14px 6px;
        position: relative;
        width: 300px;
        height: 3px;
        background: #fff;
        .circle {
          width: 11px;
          height: 11px;
          background: #fff;
          border-radius: 50%;
          &:nth-child(1) {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          &:nth-child(2) {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          &:nth-child(3) {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(50%, -50%);
          }
        }
        .status-icon {
          width: 8px;
          height: 8px;
          background: url("../../assets/imgs/refund-progress.png");
          background-size: 100% 100%;
        }
      }
    }
    .content {
      padding: 14px 16px 34px 14px;
      .user-confirm {
        padding-left: 23px;
        box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
        border-radius: 5px;
        .title {
          padding-right: 26px;
          height: 54px;
          line-height: 54px;
          border-bottom: 1px solid rgba(234, 234, 234, 1);
        }
        .result {
          padding: 17px 0 21px;
        }
      }
      .reply {
        margin-top: 11px;
        padding-left: 22px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
        border-radius: 5px;
        .title {
          padding-right: 26px;
          height: 54px;
          border-bottom: 1px solid rgba(234, 234, 234, 1);
        }
        .icon {
          height: 20px;
          width: 20px;
          border-radius: 50%;
        }
        .name {
          margin-left: 10px;
          margin-right: auto;
        }
        .content {
          margin-top: 21px;
          padding: 17px 10px 12px 0;
          line-height: 24px;
          .img-list {
            overflow-x: auto;
            .img {
              margin-right: 5px;
              flex-shrink: 0;
              height: 103px;
              width: 103px;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}
</style>